<template>
  
  <div class="dialog" v-show="showDialog">

    <h3>{{ title }}
      <button @click="showDialog = false">X</button>
    </h3>
  
    <div>
      <slot></slot>
    </div>

    <p>
      <slot name="footer">
        <button @click="showDialog = false">取消</button>
        <button>确定</button>
      </slot>
    </p>
  </div>


</template>

<script>
export default {
  data() {
    return {
      showDialog: this.visible
    }
  },
  props: {
    //弹层
    title: String,
    visible: Boolean,
   
  },
  watch: {
    visible(val) {
      this.showDialog = val
    },
    showDialog(val) {
      this.$emit('SwitchOpen', val)
    }
  }
}
</script>
<style>
.dialog {
  background-color: pink;
  width: 300px;
  height: 200px;

}


</style>